<template>
	<view class="bait" :style="viewColor">
		<!-- 顶部导航 -->
		<!-- #ifdef MP || APP-PLUS -->
		<view class="bgColor" :style="{ height: statusBarHeight}"></view>
		<!-- #endif -->
		<view class="header">
			<view class="head-menu" >
				<view class="iconfont icon-ic_leftarrow" @click="goback"></view>
				<view class="iconfont icon-ic_home" @click="goHome" ></view>
			</view>
		</view>
		<view class="page-body" :style="'height:'+height+'px'" v-if="classifyData.length>0">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
				<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index==categoryActive?'active':''"
					v-for="(item,index) in classifyData">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
				<view v-for="(children,index) in classifyData" :key="index" class="box">
					<template v-if="children.children.length>0">
						<view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in children.children" :key="i">
								<u--image :src="item.pic"  width="110rpx" height="110rpx" radius="8" @click="cart(item.id)"></u--image>
								<view class="right-box">
									<view class="right-box-left" @click="cart(item.id)">
										<view class="tit">{{item.name}}</view>
										<view class="tips">
											{{item.tips}}
										</view>
										<view class="price">
											<text class="symbol">￥</text>
											<text class="num">{{item.price}}</text>
										</view>
									</view>
									<view class="right-box-right" @click="changeCartNum(index,i)">
										<u-icon name="shopping-cart" color="#fff" size="28"></u-icon>
										<view class="badge-wrap">
											<u-badge max="99" :value="item.cartNum"></u-badge>
										</view>
									</view>
								</view>
							
						</view>
					</template>
					<template v-if="children.children.length == 0">
						<view class="right-empty">
							<u-empty
							       mode="data"
							       icon="https://crmeb-test.zhidiaotianxia.com/uploads/def/20250114/17be10d575841cfbf428f9e0ad4e1cae.png"
							       :text="`还未上架${children.name}呢 ^-^`"
							       width="150rpx" 
							       textSize="24rpx"
							>
							</u-empty>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>
		<view class="empty" v-else-if="classifyData.length === 0">
			<u-empty
			        mode="data"
			        icon="https://crmeb-test.zhidiaotianxia.com/uploads/def/20250114/17be10d575841cfbf428f9e0ad4e1cae.png"
					text="钓场暂未上架饵料"
					width="300rpx" 
					textSize="24rpx"
			>
			</u-empty>
		</view>
		<!-- 购物车浮窗 -->
		<u-transition :show="cartTotal>0" duration="400">
			<view class="cart">
				<view class="icon-wrap" @click="cartListShow = true">
					<u-icon name="/static/images/shopping-cart.png" size="100rpx" class="icon"></u-icon>
					<view class="badge-wrap">
						<u-badge max="99" :value="cartTotal"></u-badge>
					</view>
				</view>
				<view class="center" @click="cartListShow = !cartListShow">
					<view class="label">
						合计：
					</view>
					<view class="price">
						<text class="symbol">￥</text>
						<text class="num">{{cartAllCost}}</text>
					</view>
				</view>
				<view class="btn" @click="onsubmit">
					去结算
				</view>
			</view>
		</u-transition>
		<u-popup :show="cartListShow" @close="cartListShow = !cartListShow" round="12rpx">
			<view class="cart-popup">
				<view class="c-header">
					<view class="left">
						已选购商品（{{cartTotal}}件）
					</view>
					<view class="right" @click="clearCart">
						<u-icon name="trash" size="30rpx" color="#9f9f9f"></u-icon>
						<text class="text">清空购物车</text>
					</view>
				</view>
				<view class="cart-list">
					<view class="c-single" v-for="(item,index) in cartList" :key="item.id">
						<view class="c-s-left">
							<u--image :src="item.pic"  width="90rpx" height="90rpx" radius="8"></u--image>
							<view class="info-wrap">
								<view class="i-title">
									{{item.title}}
								</view>
								<view class="i-tips">
									{{item.tips}}
								</view>
								<view class="i-price">
									<text class="i-symbol">￥</text>
									<text class="i-num">{{item.price}}</text>
								</view>
							</view>
						</view>
						<view class="c-s-right">
							<u-number-box v-model="item.num" @change="(e)=>valChange(e,index)" @overlimit="(type)=>handleMinLimit(type,index)">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12" color="#549ce3"></u-icon>
								</view>
								<text slot="input"class="input">
									{{item.num}}
								</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 底部导航菜单 -->
		<view class="tabbar">
			<storeTabbar :value="1" :storeId = 'storeID'></storeTabbar>
		</view>
		<!-- <home></home> -->
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	// import classifyData from '../../api/classify.data.js';
	import storeTabbar from '@/components/storeTabbar/storeTabbar.vue';
	import home from '@/components/home';
	export default {
		computed: { 
			...mapGetters(['viewColor']),
			//购物车购买数量
			cartTotal(){
				let total = this.classifyData.reduce(function(tol,num){
					return tol + num.children.reduce(function(t,n){
						return t+n.cartNum
					},0)
				},0)
				return total
			},
			//购物车合计费用
			cartAllCost(){
				return this.cartList.reduce(function(tol,num){
					return (tol*100 + (num.price*100*num.num))/100
				},0)
			}
			
		},
		components:{storeTabbar,home},
		data() {
			return {
				cartListShow:false,
				cartList:[
					/* {
						id:1,
						pic:'https://cdn.uviewui.com/uview/album/10.jpg',
						title:'鱼饵2',
						tips:'颗粒状 | 中国',
						price:9.9,
						num:1
					},
					{
						id:2,
						pic:'https://cdn.uviewui.com/uview/album/8.jpg',
						title:'鱼饵3',
						tips:'颗粒状 | 中国',
						price:9.9,
						num:2
					},
					{
						id:3,
						pic:'https://cdn.uviewui.com/uview/album/2.jpg',
						title:'鱼饵3',
						tips:'颗粒状 | 中国',
						price:19.9,
						num:6
					},
					{
						id:4,
						pic:'https://cdn.uviewui.com/uview/album/2.jpg',
						title:'鱼饵3',
						tips:'颗粒状 | 中国',
						price:19.9,
						num:6
					} */
				],//购物车数据
				statusBarHeight: 0,
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData:[],
				// classifyData,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:51,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				navHeight:43,//如果此页面位自定义nav头部，自己改变高度值
				storeID:null,
			};
		},
		onLoad(options) {
			this.storeID = Number(options.storeID);
			if (!options.storeID) return this.$util.Tips({
				title: '缺少参数无法查看钓场饵料'
			}, {
				tab: 1,
				url: '/pages/fishingPond/index'
			});
			this.preview = true
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight - this.navHeight;
		},
		onReady() {
			this.getHeightList();
		},
		methods:{
			// 去结算
			onsubmit(){
				let order = this.cartList.map(item=>({id:item.id,num:item.num}))
				// console.log(order);
				uni.navigateTo({
					url:'/pages/store/order_pay/index'
				})
			},
			//点击加入购物车
			changeCartNum(index,i){
				this.classifyData[index].children[i].cartNum ++
				//购物车数组
				let cartList = this.cartList
				//新增商品的ID
				let appendId = this.classifyData[index].children[i].id
				//遍历购物车中该新增商品ID是否存在返回对应索引，如果存在，则只改变该商品的数量，如果不存在，则新增此商品到购物车
				let searchIndex = cartList.findIndex(item=> item.id === appendId)
				if(searchIndex===-1){
					let {id,name,tips,pic,price} = this.classifyData[index].children[i]
					let newObj = {
						id,
						pic,
						title:name,
						tips,
						price,
						num:1,
						outerIndex:index,
						subcoatIndex:i
					}
					this.cartList.push(newObj)
				}else{
					this.cartList[searchIndex].num++
				}
				
				
			},
			//购物车数量变化
			valChange(e,index){
				let outerIndex = this.cartList[index].outerIndex
				let subcoatIndex = this.cartList[index].subcoatIndex
				this.classifyData[outerIndex].children[subcoatIndex].cartNum = e.value
				
			},
			//超出范围阈值时触发
			handleMinLimit(type,index){
				if(type === 'minus'){
					let outerIndex = this.cartList[index].outerIndex
					let subcoatIndex = this.cartList[index].subcoatIndex
					this.classifyData[outerIndex].children[subcoatIndex].cartNum = 0
					this.cartList.splice(index,1)
					if(this.cartList.length === 0)this.cartListShow = false
				}
			},
			//清空购物车
			clearCart(){
				this.cartList = []
				this.classifyData.forEach(item=>{
					item.children.forEach(citem=>{
						citem.cartNum = 0
					})
				})
				this.cartListShow = false;
				uni.$u.toast('购物车已清空')
			},
			goback: function() {
				// uni.navigateBack();
				uni.switchTab({
					url:'/pages/fishingPond/index'
				})
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			getHeightList(){
				let _this = this;
				let selectorQuery=uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					_this.leftItemHeight  =  rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
					_this.diff =  _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect){
						// rect.id      // 节点的ID
						// rect.dataset // 节点的dataset
						// rect.left    // 节点的左边界坐标
						// rect.right   // 节点的右边界坐标
						// rect.top     // 节点的上边界坐标
						// rect.bottom  // 节点的下边界坐标
						// rect.width   // 节点的宽度
						// rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
					})
					_this.arr = arr
				}).exec()
			},
			scroll(e) {
				let _this = this
				if(this.timeoutId){
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function(){ //节流
					_this.scrollHeight = e.detail.scrollTop + 1;
					// _this.scrollHeight = e.detail.scrollTop + 1 + _this.height/2;
					// _this.scrollHeight = e.detail.scrollTop + 30;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length;i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i+1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
							_this.categoryActive = i;
							(_this.diff>0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff)/(classifyData.length-1)));
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.timeoutId = undefined;
				}, 10)
			},
			categoryClickMain(index) {
				this.categoryActive = index;
				this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[index]//防止两次相等造成点击不触发滚动时间
			},
			cart(id) {
				// uni.showToast({
				// 	title: text,
				// 	icon: "none",
				// })
				uni.navigateTo({
					url:'/pages/goods_details/index?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgColor{
		background: #549CE3;
	}
	.tabbar{
		position: fixed; 
		z-index: 20000;
		bottom: 0; 
		left: 0; 
	}
	.header {
		position: relative;
		z-index: 6;
		display: flex;
		align-items: center;
		padding-right: 34rpx;
		height: 43px;
		padding-left: 33rpx;
		background: #549CE3;
		.head-menu {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			height: 27px;
			width: 70px;
			background: rgba(255,255,255,.8);
			border-radius: 13px;
			.icon-ic_leftarrow {
				font-size: 32rpx;
				color: #333333 !important;
			}
			.iconfont {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				text-align: center;
				color: #000000 !important;
				box-sizing: border-box;
				&.icon-ic_leftarrow {
					border-right: 1px solid rgba(000,000,000,.2) !important;
				}
			}
		}
	}
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
		.nav-left {
			width: 250rpx;
			background: #fafafa;
			.nav-left-item {
				height: 100rpx;
				border-right: solid 1px #f1f1f1;
				border-bottom: solid 1px #f1f1f1;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.nav-left-item:last-child{
				border-bottom: none;
			}
		}
		.nav-right {
			// padding-bottom: 150rpx;
			.box {
				display: block;
				overflow: hidden;
				border-bottom: 18rpx solid #f3f3f3;
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: flex-start;
				// align-items: flex-start;
				// align-content: flex-start;
				/* min-height: 100vh; */ 
				/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
				&:last-child {
					border: none;
					min-height:calc(100vh - 100px);
					padding-bottom: 120rpx;
				}
				.right-empty{
					padding: 50rpx 0;
				}
			}
			.nav-right-item {
				display: flex;
				align-items: center;
				padding: 11rpx;
				font-size: 24rpx;
				background: #fff;
				.right-box{
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 26rpx 0 20rpx;
					.right-box-left{
						.tit{
							margin-top: 4rpx;
							font-size: 26rpx;
							color: #333333;
							font-weight: bold;
						}
						.tips{
							margin-top: 4rpx;
							font-size: 20rpx;
							color: #9f9f9f;
						}
						.price{
							color: #ffa96f;
							margin-top: 6rpx;
							.symbol{
								font-size: 24rpx;
							}
							.num{
								font-size: 30rpx;
								// font-weight: bold;
							}
						}
					}
					.right-box-right{
						background-color: var(--view-theme);
						display: flex;
						justify-content: center;
						align-items: center;
						width: 40rpx;
						height: 40rpx;
						border-radius: 8px;
						position: relative;
						.badge-wrap{
							font-size: 24rpx;
							text-align: center;
							transform: scale(.66);
							position: absolute;
							right: -10rpx;
							top: -14rpx;
						}
					}
				}
				
			}
		}
	}
	.active {
		color: #549CE3;
		background: #fff;
		border-right: 0;
	}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
	   width: 0;
	   height: 0;
	   color: transparent;
	}
	.cart{
		position: fixed;
		bottom: 130rpx;
		height: 86rpx;
		width: 650rpx;
		left: 50rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-radius: 50px;
		box-shadow: 0 0 6px 0 #b5d3ed88;
		overflow: hidden;
		z-index: 20000;
		.icon-wrap{
			position: relative;
			.icon{
				padding: 0 16rpx;
			}
			.badge-wrap{
				transform: scale(.8);
				position: absolute;
				right: 16rpx;
				top: 10rpx;
				z-index: 10000;
			}
		}
		.center{
			display: flex;
			align-items: center;
			flex:1;
			padding-left: 10rpx;
			.label{
				font-size: 24rpx;
				color: #6f6f6f;
			}
			.price{
				color: #fc8b3f;
				.symbol{
					font-size: 22rpx;
				}
				.num{
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
		.btn{
			background-color: var(--view-theme);
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			width: 150rpx;
			font-size: 26rpx;
		}
	}
	.cart-popup{
		padding-bottom:230rpx;
		.c-header{
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			font-size: 24rpx;
			.left{
				font-size: #333333;
			}
			.right{
				display: flex;
				color: #8f8f8f;
				.text{
					margin-left: 4rpx;
				}
			}
		}
		.cart-list{
			padding: 0 30rpx;
			margin-top: 20rpx;
			background-color: #f6f7f9;
			.c-single{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				.c-s-left{
					display: flex;
					align-items: center;
					.info-wrap{
						flex: 1;
						padding-left: 20rpx;
						.i-title{
							font-size: 26rpx;
							color: #333333;
						}
						.i-tips{
							font-size: 20rpx;
							color: #9f9f9f;
						}
						.i-price{
							color: #ffa96f;
							margin-top: 6rpx;
							.i-symbol{
								font-size: 22rpx;
							}
							.i-num{
								font-size: 30rpx;
							}
						}
					}
				}
				.c-s-right{
					.minus {
						width: 38rpx;
						height: 38rpx;
						border-width: 1px;
						border-color: var(--view-theme);
						border-style: solid;
						border-top-left-radius: 100px;
						border-top-right-radius: 100px;
						border-bottom-left-radius: 100px;
						border-bottom-right-radius: 100px;
						@include flex;
						justify-content: center;
						align-items: center;
					}
				
					.input {
						padding: 0 10px;
						width: 60rpx;
						font-size: 26rpx;
						text-align: center;
					}
				
					.plus {
						width: 38rpx;
						height: 38rpx;
						background-color: var(--view-theme);
						border-radius: 50%;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
		
	}
	.empty{
		margin-top: 200rpx;
	}
</style>
